import React, { Component,PropTypes} from 'react';
import {Link} from 'react-router';
import Split from '../CommonComponent/Split'
import Top from '../CommonComponent/Top'
import OrderPopUp from '../OrderManage/OrderPopUp'
import ShopCarts from '../OrderManage/ShopCarts'
import {ProductList,SettlementShopCar,ShopCarList,QueryDefault} from '../../Action/auth';

export default class OnlineOrder extends Component {
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
          this.select=[]
          this.accountAll = 0
          this.num = 0
        this.state = {
            toShowModal:false,
            showCart:false,
            onlineGoodsList:[],
            listName:'',
            listImage:'',
            listParams:'',
            listBoxParams:'',
            productId:'',
            currentPrice:'',
            name:'',
            mobile:'',
            area:'',
            address:'',
            addressId:''
        };
      }

    static contextTypes = {
        router:PropTypes.object
    }

     onLineBtn(id,name,image,params,box_params,current_price){
        this.setState({
            toShowModal:true,
            listName:name,
            listImage:image,
            listParams:params,
            listBoxParams:box_params,
            productId:id,
            currentPrice:current_price
        })
    }

    async componentWillMount() {
        await this.getQueryDefault()
        this.getOrderList('','','','','')
        this.getShopCarList()
    }

    //查看个人资料
    async getQueryDefault(){
        await QueryDefault()
            .then(res=>{
                this.setState({name:res.name})
                this.setState({mobile:res.mobile})
                this.setState({detail:res.detail})
                this.setState({address:res.address?res.address:'收货地址为空,请先设置地址'})
                this.setState({addressId:res.id})
            })
    }

    //请求列表接口
    async getOrderList(name,order,orderName,minPrice,maxPrice){
        await ProductList(name,order,orderName,minPrice,maxPrice)
            .then(res=>{
                this.setState({onlineGoodsList:res.resultList})
            })
            .catch(err=>{
                console.warn('err',err)
            })
    }

    //购物车列表
    async getShopCarList(){
        await ShopCarList(0)
            .then(res=>{
                this.accountAll= 0;
                this.num = 0;
                res.resultList.map(el=>{
                    this.select.push(el.CAR_ID)
                    this.accountAll += parseInt(parseInt(el.PRICE)*parseInt(el.PRODUCT_NUM))
                    this.num += el.PRODUCT_NUM
                })
                this.setState({renderMsg:1})
            })
    }

    //生成订单
    async toSubmit(){
        if(!this.state.addressId){
            alert('请选择地址')
            return
        }else{
            this.select = []
            await this.getShopCarList()
            if(this.select.length>0){
                SettlementShopCar(this.select,this.state.addressId)
                    .then(res=>{
                        alert('下单成功,上级正在发货,请耐心等待哦')
                        this.context.router.push({pathname:'/orderList'})
                    })
            }else{
                alert('请选择商品')
            }
        }

    }

    render(){
        const {toShowModal,showCart,onlineGoodsList,productId,listName,listImage,listParams,listBoxParams,currentPrice} = this.state
        return(
            <div className="containerNav">
                <Top
                    title = {'在线订单'}
                />
                <div className="pAll">
                    <div className="flex flex-pack-justify">
                        <span className="f14 ml1">{this.state.name}</span>
                        <span className="f14 ml1">{this.state.mobile}</span>
                    </div>
                    <Link to="/chooseInfomation">
                        <div className="mt5" style={{height:40,lineHeight:'40px',overflow:'hidden'}}>
                            <span className="di lineh0" style={{width:12,height:19}}>
                                <img src={require('../../Images/common/location.png')} alt=""/>
                            </span>
                            <span className="f14 ml1 color9">{this.state.address}</span>
                            <span className="f14 color9">{this.state.detail}</span>
                            <span className="di ml1 fr" style={{width:9,height:16,lineHeight:0,marginTop:12}}>
                                <img src={require('../../Images/common/rightArrow.png')} alt=""/>
                            </span>
                        </div>
                    </Link>
                </div>

                <Split />
                <div>
                    {/*<div className="f14 flex flex-pack-justify padd_lr" style={{height:30,lineHeight:'30px'}}>
                        <span className="color6">我的余额</span>
                        <span className="colorlv">￥235</span>
                    </div>*/}
                    {
                        onlineGoodsList&&onlineGoodsList.map((el,index)=>{
                            return(
                                <div className="flex flex-pack-justify pAll border_bottom">
                                    <div className="flex">
                                        <div style={{width:50,height:50}}><img src={el.IMAGE} alt=""/></div>
                                        <div className="ml1">
                                            <div><span className="color6">{el.NAME}</span ></div>
                                            <div className="color9 mt">箱规 : <span>{el.PARAMS}</span></div>
                                        </div>
                                    </div>
                                    <div className="color6 flex" style={{alignItems:'flex-end'}}>
                                        <button
                                            className="bgk_lv colorfff borderno pa_all border_4 f12"
                                            onClick={()=>this.onLineBtn(el.ID,el.NAME,el.IMAGE,el.PARAMS,el.BOX_PARAMS,el.CURRENT_PRICE)}
                                        >在线下单</button>
                                    </div>
                                </div>
                            )
                        })
                    }


                </div>
                <div className="pf bottom0 flex flex-align-center f14 border_top width100" style={{height:50}}>
                    <div className="flex flex-1 ml1">
                        <div className="posr">
                            <span
                                className="di"
                                style={{width:30,height:20}}
                                onClick={()=>this.setState({showCart:true})}
                            >
                                <img src={require('../../Images/cart.png')} alt=""/>
                            </span>
                            <span
                                className="di bgk_fff border_ra50 changeBorder tc pa f10 colorlv"
                                style={{width:15,height:15,lineHeight:'15px',top:-8,left:25,zIndex:100}}
                            >{this.num}</span>
                        </div>

                        <span className="di ml1">总计 : </span>
                        <span className="colorlv">￥{this.accountAll}</span>
                    </div>
                    <div
                        className="flex flex-align-center flex-pack-center bgk_lv colorfff height100"
                        style={{width:100}}
                        onClick = {()=>this.toSubmit()}
                    >提交订单</div>
                </div>
                {
                    toShowModal?
                        <OrderPopUp
                            closePopUp = {()=>this.setState({toShowModal:false})}
                            image = {listImage}
                            params = {listParams}
                            boxParams = {listBoxParams}
                            name = {listName}
                            id = {productId}
                            price = {currentPrice}
                            updateAccount = {()=>this.getShopCarList()}
                        />
                        :
                        null
                }
                {
                    showCart?
                        <ShopCarts
                            updateNum = {()=>this.getShopCarList()}
                            closeCart = {()=>this.setState({showCart:false})}
                        />
                        :
                        null
                }



            </div>
        )
    }



}